import React, { useState, useCallback, useEffect } from 'react';
import { Image, View, Text } from '@ray-js/ray';
import { NavBar } from '@ray-js/smart-ui';
import styles from './index.module.less';
import { Picker } from '@ray-js/smart-ui';
import { BottomSheet, Button } from '@ray-js/smart-ui';
import yun_imge from '@/res/1.png';
import Mic from '@tuya-miniapp/icons/dist/svg/Mic';
import Right from '@tuya-miniapp/icons/dist/svg/Right';
import { Icon } from '@ray-js/smart-ui';
import { Slider } from '@ray-js/smart-ui';
import { Battery } from '@ray-js/smart-ui';

import { putDpData } from '@/utils/sendDp';
import { connectBLEDevice } from '@/utils/ble';
import { dpCodes, globalConfig } from '@/config';

import {
  showToast,
  onDpDataChange,
  offDpDataChange,
  deleteTemporaryPassword,
  createTemporaryPassword,
  updateTempPassword,
} from '@ray-js/ray';

const { spray_switch, mode_set } = dpCodes;

// 将三种模式独立出来
const modeColumns = [
  {
    // name: '模式一',
    columns: [
      // {
      //   // values: ['mode1'],
      //   className: 'column1',
      // },
      {
        values: ['1', '2', '3', '4', '5'],
        className: 'column2',
        unit: '档',
      },
      {
        values: ['5', '10', '15', '20', '30', '45', '60', '90'],
        className: 'column3',
        unit: '分钟',
      },
      // {
      //   values: ['∞', '1', '2', '3', '4', '5'],
      //   className: 'column4',
      //   unit: '次',
      // },
    ],
  },
  // {
  //   name: '模式二',
  //   columns: [
  //     {
  //       values: ['mode2'],
  //       className: 'column1',
  //     },
  //     {
  //       values: ['1', '2', '3', '4', '5'],
  //       className: 'column2',
  //       unit: '档',
  //     },
  //     {
  //       values: ['5', '10', '15', '20', '30', '45', '60', '90'],
  //       className: 'column3',
  //       unit: '分钟',
  //     },
  //     {
  //       values: ['∞', '1', '2', '3', '4', '5'],
  //       className: 'column4',
  //       unit: '次',
  //     },
  //   ],
  // },
  // {
  //   name: '模式三',
  //   columns: [
  //     {
  //       values: ['mode3'],
  //       className: 'column1',
  //     },
  //     {
  //       values: ['1', '2', '3', '4', '5'],
  //       className: 'column2',
  //       unit: '档',
  //     },
  //     {
  //       values: ['5', '10', '15', '20', '30', '45', '60', '90'],
  //       className: 'column3',
  //       unit: '分钟',
  //     },
  //     {
  //       values: ['∞', '1', '2', '3', '4', '5'],
  //       className: 'column4',
  //       unit: '次',
  //     },
  //   ],
  // },
];

export function PumpPage() {
  const [isSwitchOn, setIsSwitchOn] = useState(false);
  const [show, setShow] = useState(false);
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  // 新增状态保存每个模式选择器的值
  // const [pickerValues, setPickerValues] = useState<Array<string[]>>(
  //   Array(modeColumns.length).fill([]).map(() => [])
  // );

  // 定义各模式的默认值
  const defaultPickerValues = [
    ['mode1', '1', '5', '1'], // 模式一：1档，5分钟，∞次
    ['mode2', '2', '10', '1'], // 模式二：3档，10分钟，∞次
    ['mode3', '3', '15', '2'], // 模式三：5档，30分钟，∞次
  ];

  // const defaultPickerValues = [
  //   [ '2', '5', '∞'], // 模式一：1档，5分钟，∞次
  //   ['1', '15', '∞'], // 模式二：3档，10分钟，∞次
  //   ['5', '30', '∞'], // 模式三：5档，30分钟，∞次
  // ];

  const [Slidervalue, setSlidervalue] = React.useState(1);

  // 新增状态保存每个模式选择器的值，使用默认值初始化
  const [pickerValues, setPickerValues] =
    useState<Array<string[]>>(defaultPickerValues);

  const handleSwitchToggle = () => {
    setIsSwitchOn(!isSwitchOn);
    console.log(`Switch is now ${isSwitchOn ? 'off' : 'on'}`);
    putDpData(spray_switch, !isSwitchOn); // 发送开关状态到设备
  };

  const toggleBottomSheet = useCallback(() => setShow(!show), [show]);

  const onChange_picker = useCallback((event, index: number) => {
    const { value } = event.detail;
    const newPickerValues = [...pickerValues];
    newPickerValues[index] = value;
    setPickerValues(newPickerValues);
    console.log(`Column ${index} selected value: ${value}`);
  }, [pickerValues]);

  const handleTabClick = (index: number) => {
    setActiveTabIndex(index);
  };

  // 点击完成按钮的回调函数
  // const handleComplete = () => {
  //   modeColumns.forEach((mode, index) => {
  //     console.log(`${mode.name} 的值:`, pickerValues[index]);
  //   });
  //   setShow(false);
  // };

  // const handleComplete = () => {
  //   modeColumns.forEach((mode, index) => {
  //     console.log(`${mode.name} 的值:`, pickerValues[index]);
  //     // 这里可以添加发送默认状态到设备的逻辑，示例代码如下
  //     // 假设 putDpData 可以发送设置状态，实际使用时需根据业务调整
  //     // putDpData(`mode_${index + 1}_settings`, pickerValues[index]); 
  //   });
  //   setShow(false);
  // };

  const handleComplete = () => {
    // 用于存储每个模式拼接后的字符串
    const modeStrings = [];
    modeColumns.forEach((mode, index) => {
      console.log(`${mode.name} 的值:`, pickerValues[index]);
      // 将每个模式的选择值用逗号拼接成字符串
      const modeValueString = pickerValues[index].join(',');
      modeStrings.push(modeValueString);
    });
    // 将所有模式的字符串用分号合并成一个完整字符串
    const allModesString = modeStrings.join(';');
    console.log('合并后的模式字符串:', allModesString);
    // 假设存在一个 dpCode 用于接收模式设置，实际使用时需替换为真实 dpCode

    putDpData(mode_set, allModesString);
    setShow(false);
  };



  // 定义 DP 数据变化处理函数
  const handleDpDataChange = ({ dpCode, dpValue }) => {
    // 根据变化的 DP 点进行不同的处理
    console.log(`DP Code: ${dpCode}, DP Value: ${dpValue}`);

    if (dpCode === '106') {       // 喷雾开关
      console.log(`bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
      setIsSwitchOn(dpValue);
    }
  };

  useEffect(() => {
    const dpDataChangeHandler = ({ dps }) => {
      // 遍历每个变化的 DP 点
      Object.entries(dps).forEach(([dpCode, dpValue]) => {
        handleDpDataChange({ dpCode, dpValue });
      });
    };

    onDpDataChange(dpDataChangeHandler);

    // 清理函数，组件卸载时执行
    return () => {
      offDpDataChange(dpDataChangeHandler);
    };
  }, []);

  // 新增状态用于保存气泡数据
  const [bubbles, setBubbles] = useState<{ id: number; size: number; left: number; duration: number }[]>([]);

  // 生成随机气泡的函数
  const generateBubbles = useCallback(() => {
    const newBubble = {
      id: Date.now(),
      size: Math.floor(Math.random() * 20) + 10, // 随机大小 10 - 30px
      left: Math.floor(Math.random() * 100), // 随机水平位置 0 - 100%
      duration: Math.floor(Math.random() * 5) + 3, // 随机动画持续时间 3 - 8 秒
    };

    // 使用函数式更新，避免闭包问题
    setBubbles(prevBubbles => {
      // 限制气泡数量，避免过多气泡导致性能问题
      if (prevBubbles.length >= 20) {
        return [...prevBubbles.slice(1), newBubble];
      }
      return [...prevBubbles, newBubble];
    });

    // 定时移除气泡，修正时间为 newBubble.duration * 1000，保证和动画时间一致
    setTimeout(() => {
      setBubbles(prevBubbles => prevBubbles.filter(bubble => bubble.id !== newBubble.id));
    }, newBubble.duration * 1000);
  }, []);

  // 组件挂载时开始生成气泡
  // 组件挂载时开始生成气泡，降低生成频率，从每 1 毫秒改为每 500 毫秒
  // useEffect(() => {
  //   const interval = setInterval(generateBubbles, 500);
  //   return () => clearInterval(interval);
  // }, [generateBubbles]);
  useEffect(() => {
    // 只有当开关打开时才生成气泡
    if (isSwitchOn) {
      const interval = setInterval(generateBubbles, 500);
      return () => clearInterval(interval);
    } else {
      // 当开关关闭时，清空所有气泡
      setBubbles([]);
    }
  }, [generateBubbles, isSwitchOn]);
  // 每隔 1 秒生成一个气泡

  return (
    <>
      <NavBar
        title="云图香氛机"
        leftArrow
        className={styles.title_css_index}
        border={false}
      />
      {/* C:\Users\24237\Desktop\TuYaMiniProject\yuntu_app\src\res\1.png */}
      <View className={styles.container}>
        {/* <View className={styles.pump_image} >

          <Image src={yun_imge} style={{ width: '100%', height: '200%', marginTop: '-70px' }} />
        </View> */}

        <View className={styles.pump_image} >
          <View className={styles.fogBubbleContainer} >
            {isSwitchOn && bubbles.map(bubble => (
              <View
                key={bubble.id}
                className={styles.bubble}
                style={{
                  width: `${bubble.size}px`,
                  height: `${bubble.size}px`,
                  left: `${bubble.left}%`,
                  animationDuration: `${bubble.duration}s`,
                }}
              />
            ))}
          </View>
          <View className={styles.imageContainer} >
            <Image src={yun_imge}
              style={{ width: '100%', height: '200%', marginTop: '-100px' }}
            />
          </View>

          <View className={styles.horizontalContainers}>
            <View className={styles.horizontalItem}>
              <Text className={styles.horizontalText}>T:{20}℃</Text>
            </View>
            <View className={styles.horizontalItem}>
              <Text className={styles.horizontalText}>RH:{50}%</Text>
            </View>
            <View className={styles.horizontalItem}>
              {/* <Text className={styles.horizontalText}>BAT:{90}%</Text> */}
              <Battery
                type="horizontal"
                highColor="#70CF98"
                lowColor="#ff0000"
                middleColor="#FF0000"
                // color="red" 
                size={12}
                value={100} />
            </View>
          </View>
        </View>


        <View className={styles.pump_switch}>
          <View className={styles.sound_info}>
            <Icon name={Mic} size="30px" />
            <View className={styles.verticalLayout}>
              <Text className={styles.sound_text}>喷雾开关</Text>
              {/* <Text className={styles.sound_sub_text}>开</Text> 添加副文本 */}
              <Text className={styles.sound_sub_text}>{isSwitchOn ? '开' : '关'}</Text>
            </View>
          </View>
          <View
            className={`${styles.switch} ${isSwitchOn ? styles.switchOn : ''}`}
            onClick={handleSwitchToggle}
          >
            <View className={`${styles.switchLine} ${isSwitchOn ? styles.lineGrow : styles.lineShrink}`} />
            <View className={`${styles.switchSlider} ${isSwitchOn ? styles.sliderOn : ''}`} />
            <View className={`${styles.switchLine} ${isSwitchOn ? styles.lineShrink : styles.lineGrow}`} />
          </View>
        </View>



        <View className={styles.pump_woker}>
          <View>
            {/* <Button type="primary" onClick={toggleBottomSheet}>
              弹出菜单
            </Button> */}
            <View className={styles.sound_info}>
              <Icon name={Mic} size="30px" />
              <View className={styles.verticalLayout}>
                <Text className={styles.sound_text}>挡位：{Slidervalue}</Text>
                <View className={styles.sliderContainer}>
                  <Slider
                    isShowTicks
                    step={1}
                    min={1}
                    max={3}
                    maxTrackHeight="30px"
                    // minTrackWidth="1px"
                    minTrackHeight="30px"
                    tickWidth="4px"
                    tickHeight="12px"
                    tickRadius="4px"

                    hideThumbButton
                    value={Slidervalue}
                    onAfterChange={value => setSlidervalue(value)}
                    thumbStyle={{
                      borderRadius: '2px',
                      width: '8px',
                      height: '2px',
                    }}
                  />
                </View>
              </View>
            </View>

          </View>
        </View>

        <View className={styles.pump_time} >  
            <View className={styles.sound_info}>
              <Icon name={Mic} size="30px" />
              <View className={styles.verticalLayout}>
                <Text className={styles.sound_text}>堵塞清理</Text>
                <Text className={styles.sound_sub_text}>时间:{null}</Text>
              </View>
            </View>

            <Icon name={Right} size="20px" onClick={toggleBottomSheet} />
           
        </View>    

        {/* 底部弹窗*/}
        <BottomSheet show={show} title="堵塞清理" onClose={toggleBottomSheet}>
          <View className={styles.tabContainer}>
            {modeColumns.map((mode, index) => (
              <View
                key={index}
                className={`${styles.tabItem} ${index === activeTabIndex ? styles.activeTab : ''}`}
                onClick={() => handleTabClick(index)}
              >
                <Text>{mode.name}</Text>
              </View>
            ))}
          </View>

          <View className={styles.content}>
            <View className={styles.newContainer_2}>
              {modeColumns.map((mode, index) => {
                const offset = (index - activeTabIndex) * 100;// 计算每个页面的偏移量
                // 渲染时打印传递给 Picker 组件的值
                //console.log(`渲染 ${mode.name} 的 Picker,值为:`, pickerValues[index]);
                return (
                  <View
                    key={index}
                    className={`${styles.modePage} ${index === activeTabIndex ? styles.showPage : ''}`}
                    style={{ transform: `translateX(${offset}%)` }}
                  >
                    <Picker
                      columns={mode.columns}
                      onChange={(event) => onChange_picker(event, index)}
                      className={styles.picker_style}
                      activeStyle={{ color: 'rgb(6, 107, 249)' }}
                      defaultIndex={index}
                    />
                  </View>
                );
              })}
            </View>
          </View>
          <View className={styles.footer}>
            <Button type="info" block onClick={handleComplete}>
              开始
            </Button>
          </View>
        </BottomSheet>
      </View>
    </>
  );
}